<template>
  <div>
    <!-- 查看结算卡 -->
    <el-dialog
      v-model="setCardVisible"
      title="结算卡"
      width="70%"
    >
      <div style="margin-bottom: 10px;">
        您还没有结算卡，请添加
        <el-button
          type="primary"
          @click="addEditSetCard('add')"
        >添加结算卡</el-button>
      </div>
      <el-table
        :data="setCardList"
        border
      >
        <el-table-column
          label="银行名称"
          align="center"
          min-width="160"
          prop="bankType"
          :show-overflow-tooltip="true"
        >

        </el-table-column>
        <el-table-column
          label="卡号"
          align="center"
          min-width="160"
          prop="bankCard"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="银行预留手机号"
          align="center"
          min-width="160"
          prop="phone"
        />
        <el-table-column
          label="通道名称"
          align="center"
          min-width="160"
          prop="passage"
        />
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-tag
              link
              type="primary"
              @click="addEditSetCard('edit',scope.row)"
            >修改</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        v-model="setCardAddAndEditVisible"
        title="结算卡"
        width="70%"
        append-to-body
      >
        <el-form
          ref="setCardFormRef"
          :model="setCardForm"
          :rules="setCardFormRules"
          label-width="auto"
        >
          <el-form-item
            label="银行名称"
            prop="bankType"
            required
          >
            <el-select
              v-model="setCardForm.bankType"
              placeholder="请选择银行"
              clearable
              filterable
              style="width: 100%;"
            >
              <el-option
                v-for="(item,i) in bank_list"
                :label="item.label"
                :value="item.label"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="预留手机号"
            prop="phone"
            required
          >
            <el-input
              v-model="setCardForm.phone"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="银行卡号"
            prop="bankCard"
            required
          >
            <el-input
              v-model="setCardForm.bankCard"
              placeholder="请输入银行卡号"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="通道"
            prop="passage"
            required
          >
            <el-select
              v-model="setCardForm.passage"
              placeholder="请选择通道"
              clearable
              filterable
              style="width: 100%;"
            >
              <el-option
                v-for="(item,i) in pay_channel"
                :label="item.label"
                :value="item.label"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="setCardAddAndEditVisible = false">关 闭</el-button>
            <el-button
              type="primary"
              @click="setCardSubmit"
            >确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="setCardVisible = false">关 闭</el-button>
          <el-button
            type="primary"
            @click="setCardVisible = false"
          >
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="lookSetCard" lang="ts">
import api from '@/api/workMag/contractInquiry';
import { SetCardVo } from '@/api/workMag/contractInquiry/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { bank_list, pay_channel } = toRefs<any>(proxy?.useDict('bank_list', 'pay_channel'));

// 查看结算卡
const setCardVisible = ref(false);
const setCardId = ref<string | number>('false');
const setCardAddAndEditVisible = ref(false);
const submitMethod = ref('post');
const setCardFormRef = ref<ElFormInstance>();
const setCardForm = ref<SetCardVo>({
  bankCard: '',
  bankType: '',
  id: '',
  passage: '',
  phone: '',
  phoneNoHide: '',
  workId: ''
});
const setCardFormRules = ref({
  bankType: [{ required: true, message: '请选择银行', trigger: 'change' }],
  phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  bankCard: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
  passage: [{ required: true, message: '请选择通道', trigger: 'change' }]
});
const setCardList = ref<SetCardVo[]>();
const lookSetCard = async (workId: string | number) => {
  setCardId.value = workId;
  await setCardFun();
  setCardVisible.value = true;
};
const setCardFun = async () => {
  const res = await api.setCard(setCardId.value);
  setCardList.value = res.rows;
};
const addEditSetCard = async (type: string, row: SetCardVo = setCardForm.value) => {
  setCardFormRef.value?.resetFields();
  setCardAddAndEditVisible.value = true;
  setCardForm.value.workId = setCardId.value;
  submitMethod.value = 'post';
  if (type == 'edit') {
    const res = await api.setCardDetail(row.id);
    setCardForm.value = res.data;
    setCardForm.value.phone = res.data.phoneNoHide;
    submitMethod.value = 'put';
  }
};
const setCardSubmit = async () => {
  setCardFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const res = await api.setCardAddAndEdit(setCardForm.value, submitMethod.value);
      setCardAddAndEditVisible.value = false;
      ElMessage.success(submitMethod.value == 'post' ? '添加成功！' : '修改成功！');
      setCardFun();
    }
  });
};
defineExpose({
  lookSetCard
});
</script>

<style lang="scss" scoped>
</style>
